<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>智能水表抄表系统 - 用户登录</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/static/styles/main.css">
    <style>
        .login-container {
            min-height: calc(100vh - 180px);
            display: flex;
            align-items: center;
        }
        .hero-section {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/static/images/water-meter-bg.jpg');
            background-size: cover;
            background-position: center;
            color: white;
            border-radius: 10px 0 0 10px;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        @media (max-width: 992px) {
            .hero-section {
                border-radius: 10px 10px 0 0;
            }
        }
    </style>
</head>

<body>
    <header class="header">
        <h1><i class="fas fa-tint"></i> 智能水表抄表系统</h1>
    </header>

    <div class="container login-container py-5">
        <div class="row w-100 justify-content-center">
            <div class="col-lg-10">
                <div class="card shadow-lg">
                    <div class="row g-0">
                        <div class="col-lg-5 hero-section">
                            <div>
                                <h2 class="mb-4">欢迎使用水表抄表系统</h2>
                                <p class="mb-4">本系统提供智能水表图像识别、数据管理及统计分析功能，提高水表抄录效率。</p>
                                <div class="mb-4">
                                    <h5><i class="fas fa-check-circle"></i> 自动识别水表读数</h5>
                                    <h5><i class="fas fa-check-circle"></i> 历史数据查询统计</h5>
                                    <h5><i class="fas fa-check-circle"></i> 多用户权限管理</h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-7">
                            <div class="card-body p-md-5">
                                <h3 class="mb-4 text-center"><i class="fas fa-sign-in-alt"></i> 用户登录</h3>
                                
                                {% if error %}
                                <div class="alert alert-danger" role="alert">
                                    <i class="fas fa-exclamation-circle"></i> {{ error }}
                                </div>
                                {% endif %}
                                
                                {% if success %}
                                <div class="alert alert-success" role="alert">
                                    <i class="fas fa-check-circle"></i> {{ success }}
                                </div>
                                {% endif %}

                                <form action="/login" method="post">
                                    <div class="mb-4">
                                        <label for="username" class="form-label">用户名</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="fas fa-user"></i></span>
                                            <input type="text" class="form-control" id="username" name="username" required>
                                        </div>
                                    </div>
                                    <div class="mb-4">
                                        <label for="password" class="form-label">密码</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                            <input type="password" class="form-control" id="password" name="password" required>
                                        </div>
                                    </div>
                                    <div class="d-grid gap-2 mb-4">
                                        <button type="submit" class="btn btn-custom-primary btn-lg">
                                            <i class="fas fa-sign-in-alt me-2"></i>登录
                                        </button>
                                    </div>
                                </form>
                                
                                <hr>
                                <div class="text-center">
                                    <p>还没有账号？ <a href="/register" class="fw-bold">注册新账号</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2023 智能水表抄表系统 | 提供水表读数和编码识别</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html> 